<template>
    <div>
        <mgs-l-map
            @onMapInited="mapInited"
            style="height: 500px; margin-bottom: 10px"
        />

        <MgsSearchInput
            style="width: 500px"
            :form-data="formData"
            :form-configs="formConfigs"
        />
    </div>
</template>

<script>
import MgsSearchInput from '@mgs/components-basic/mgs-search-input.vue';
import MgsIMapDraw from '@mgs/components-item/mgs-i-map-draw.vue';
import MgsICheckGroup from '@mgs/components-item/mgs-i-check-group.vue';

export default {
    components: { MgsSearchInput },
    data() {
        return {
            bindMap: null,

            formData: { graphic: null, types: [] },
            formConfigs: [
                {
                    key: 'graphic',
                    tag: MgsIMapDraw,
                    props: {
                        bindMap: null,
                        items: [
                            {
                                type: 'Circle',
                                name: '半径检索',
                            },
                            {
                                type: 'Rectangle',
                                name: '范围检索',
                            },
                        ],
                    },
                },
                {
                    key: 'types',
                    tag: MgsICheckGroup,
                    props: {
                        checkAll: true,
                        items: [
                            {
                                label: '兴趣点',
                                content: '0101',
                            },
                            {
                                label: 'type2',
                                content: '类型2',
                            },
                        ],
                    },
                },
            ],
        };
    },
    methods: {
        mapInited(mapvm) {
            mapvm.addService(
                '1',
                'arcgisrestmap',
                'https://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'
            );
            this.bindMap = mapvm;
            this.formConfigs[0].props.bindMap = mapvm;
        },
    },
};
</script>
